<template>
  <div class="form">
    <div class="checkout wrap">{{ account.checkout.name }}</div>
    <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
      <el-form-item prop="money">
        <el-input-number v-model="form.money" style="width: 100%;" :placeholder="plugin.lang('cash.form.money')" controls-position="right" @keyup.enter="onPost" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.content" :placeholder="plugin.lang('cash.form.content')" @keyup.enter="onPost" clearable></el-input>
      </el-form-item>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-button type="warning" class="btn" @click="onOpen" plain>{{ plugin.lang('cash.form.open') }}</el-button>
      </el-col>
      <el-col :span="12">
        <el-button type="primary" class="btn" :loading="loading" @click="onPost">{{ lang.t('common.ok') }}</el-button>
      </el-col>
    </el-row>
    
  </div>
</template>
<script>
import { ref } from 'vue'
import app from '@/app'
import model from '../model'
import accountModel from '@/model/account'
import printerModel from '@/model/printer'

export default {
  setup() {
    // 当前收银台显示
    const account = accountModel.getData()

    // 表单
    const formRef = ref(null)
    const form = ref({})

    // 验证
    const rules = {
      money: [
        { required: true, message: ' ', trigger: 'blur' }
      ]
    }

    // 打开钱箱
    const onOpen = () => {
      printerModel.cashbox()
    }

    // 更新
    const loading = ref(false)
    const onPost = () => {
      formRef.value.validate(valid => {
        if (valid) {
          loading.value = true
          model.post(form.value).then(() => {
            // 打开钱箱
            onOpen()
            form.value = {}
          }).finally(() => {
            loading.value = false
          })
        }
      })
    }

    return {
      lang: app.lang,
      money: app.money,
      plugin: app.plugin.index,
      account,
      formRef,
      form,
      rules,
      loading,
      onPost,
      onOpen
    }
  }
}
</script>